<template>
  <div
    v-infinite-scroll="loadList"
    infinite-scroll-immediate="false"
    infinite-scroll-delay="500"
  >
    <!-- 顶部搜索 -->
    <div class="flexSpace">
      <div class="flexLeft">
        <div>
          <el-input
            v-model="searchParams.titile"
            placeholder="输入关键字"
            suffix-icon="el-icon-search"
          ></el-input>
        </div>
        <div style="padding: 0 0 0 20px">
          <el-date-picker
            v-model="searchParams.noticeDate"
            :clearable="false"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="消息创建时间日"
          >
          </el-date-picker>
        </div>
        <div style="padding: 0 0 0 64px">
          <el-button
            round
            style="color: #508fcc; background-color: #d8e4f6; border: none"
            @click="sendCheckList()"
          >标记为已读</el-button>
        </div>
      </div>
      <div class="flexRight">
        <div style="padding-right: 16px">
          <el-button
            round
            style="color: #ffffff; background-color: #508fcc; border: none"
            @click="getListRequest()"
          >搜索</el-button>
        </div>
        <div>
          <el-button round style="color: #999999">列</el-button>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 列表 -->
    <div>
      <listItem
        v-for="(item, index) in dataList"
        :key="index"
        :mation="item"
        @checkState="childCheckState"
      ></listItem>
    </div>
  </div>
</template>

<script>
import listItem from '@/views/msg/compoent/listItem.vue';
import { getList, markRead, searchDist } from '@/api/msg.js';
export default {
  components: { listItem },
  data() {
    return {
      searchParams: {
        // 日期
        noticeDate: '',
        titile: '',
        page: 1,
        size: '10'
      },
      // list数据
      dataList: [],
      // 已选中list
      checkArr: [],
      // 数据字典参数
      dist: []
    };
  },
  mounted() {
    searchDist().then((e) => {
      this.dist = e;
    });
    this.getListRequest();
  },
  methods: {
    // 获取list数据
    getListRequest() {
      // const sendObj = JSON.parse(JSON.stringify(this.searchParams));
      // sendObj.noticeDate = '2021-06-06';
      // sendObj.titile = encodeURI(sendObj.titile);
      // sendObj.noticeDate = encodeURI(sendObj.noticeDate + '2020-09-11 00:20:52');
      // if (sendObj.noticeDate !== '') {
      //   sendObj.noticeDate = [
      //     sendObj.noticeDate + ' 00:00:00',
      //     sendObj.noticeDate + ' 23:59:59'
      //   ];
      // }
      const sendObj = {
        ...this.searchParams
      };
      if (sendObj.noticeDate) {
        const time = sendObj.noticeDate ? new Date(sendObj.noticeDate) : new Date();
        sendObj.noticeDate = [time.format('yyyy-MM-dd 00:00:00'), time.format('yyyy-MM-dd 23:59:59')];
      }
      getList(sendObj).then((res) => {
        this.dataList = [...this.dataList, ...res.content];
      });
    },
    // 上拉触底加载下一页
    loadList() {
      this.searchParams.page += 1;
      this.getListRequest();
    },
    // 获取已选中的子列表
    childCheckState(e) {
      this.checkArr = [...this.checkArr, e];
    },
    // 发送已选中的子列表,标记为已读
    sendCheckList() {
      markRead(this.checkArr).then((e) => {
        this.dataList = [];
        this.getListRequest();
      });
    }
  }
};
</script>

<style  lang='scss'>
.flexLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flexRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flexSpace {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.msgDialog {
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__headerbtn,
  .el-dialog__close {
    color: #ffffff;
  }
}

// 图标样式
.msgListCard_around {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
